<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <style type="text/css">
        <!--
        /************ Table ************/
        .xwtable {width: 50%;border-collapse: collapse;border: 1px solid #ccc;}
        .xwtable thead td {font-size: 12px;color: #333333;text-align: center; repeat-x top center;border: 1px solid #ccc; font-weight:bold;}
        .xwtable tbody tr {background: #fff;font-size: 12px;color: #666666;}
        .xwtable tbody tr.alt-row {background: #f2f7fc;}
        .xwtable td{line-height:20px;text-align: left;padding:4px 10px 3px 10px;height: 18px;border: 1px solid #ccc;}
        -->
    </style>
    <script src="js/jquery-1.7.2.js"></script>
</head>
<body>
<h1>课程管理</h1>
<p>
    1. <button id="new_course">新增课程</button>
</p>
<p>
    2. <input id="categoryName" type="text" placeholder="请输入课程名">
        <button id="btn_search">查找课程</button>
</p>
<table id="list" style="border-style: solid;border-width: 2px" class="xwtable">
</table>
<div id="page">

</div>
<script>
    $(function (){
        let pageNum = 1;
        let pageSize = 5;
        let categoryName = $("#categoryName").val();
        loadTable(pageNum,pageSize,categoryName)
        function loadTable(pn,ps,cn){
            $.ajax({
                type:"GET",
                url:"course/pageinfo?pageNum="+pageNum+"&pageSize="+pageSize+"&categoryName="+cn,
                success: function(r){
                    console.log(
                        r
                    )
                    $("#list").empty();
                    $("#list").append("<tr>\n" +
                        "        <th>课程号</th>\n" +
                        "        <th>课程名称</th>\n" +
                        "        <th>授课教师</th>\n" +
                        "        <th>教室容量</th>\n" +
                        "        <th>当前选课人数</th>\n" +
                        "        <th colspan=\"3\">操作</th>\n" +
                        "    </tr>")
                    $("#page").empty();
                    let courses = r.result.list;
                    for (let i=0; i<courses.length; i++){
                        console.log(courses[i])
                        let c = courses[i];
                        $("#list").append("<tr><td>"+c.id+"</td><td>"+c.name+"</td><td>"+c.teachername+"</td>" +
                            "<td>"+c.capacity+"</td><td>"+c.count+"</td>" +
                            "<td><a href=/course/updateCourse.html?cid="+c.id+">修改</a></td>"+
                            "<td><a href='javascript:;' id='del' val="+"'"+c.id+"'"+">删除</a></td>"+
                            "<td><a href=/course/manager.html?cid="+c.id+">管理当前课程</a></td>"+
                            "</tr>");
                    }
                    let page = r.result.list;
                    console.log(page);
                    if(page.hasPreviousPage){
                        $("#page").append("<button id='prePage' val="+"'"+page.prePage+"'"+">上一页</button>")
                    }
                    for (let i = 1; i <= page.pages ; i++) {
                        $("#page").append("<button id='gotoPage' val="+"'"+i+"'"+">"+i+"</button>")
                    }
                    if(page.hasNextPage){
                        $("#page").append("<button id='nextPage' val="+"'"+page.nextPage+"'"+">下一页</button>")
                    }
                    console.log($("#prePage").attr("val"))
                    console.log($("#nextPage").attr("val"))
                }
            });

        }
        $(document).on('click', '#prePage',function(event) {
            let prePage = $(event.target).attr("val");
            pageNum = prePage;
            loadTable(pageNum,pageSize,categoryName)
            console.log(prePage)
        });
        $(document).on('click', '#gotoPage',function(event) {
            let toPage = $(event.target).attr("val");
            pageNum = toPage;
            loadTable(pageNum,pageSize,categoryName)
            console.log(toPage)
        });
        $(document).on('click', '#nextPage',function(event) {
            let nextPage = $(event.target).attr("val");
            pageNum = nextPage;
            loadTable(pageNum,pageSize,categoryName)
            console.log(nextPage)
        });
        $("#btn_search").click(function (){
            var cName = $("#categoryName").val();
            categoryName = cName;
            pageNum = 1;
            pageSize = 5;
            loadTable(pageNum,pageSize,categoryName)
        })
        $("#new_course").click(function (){
            location.href = "/course/addCourse.html";
        })
        $(document).on('click', '#del',function(event) {
            let cid = $(event.target).attr("val");
            $.ajax({
                type:"get",
                url:"/course/del/"+cid,
                success: function(r){
                    alert(r.msg)
                    if(r.ok){
                        var cName = $("#categoryName").val();
                        categoryName = cName;
                        pageNum = 1;
                        pageSize = 5;
                        loadTable(pageNum,pageSize,categoryName)
                    }
                }
            });
        });
    })
</script>
</body>
</html>